In this project, you'll create a spooky Halloween-themed webpage using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a website that reacts when you click a button, unleashing spooky effects! Follow along step by step.
First, you need to install a code editor called Visual Studio Code (VS Code).
For Raspberry Pi OS (Linux):
Open your terminal and type the following commands:
sudo apt update
sudo apt install code -y
For Windows:
Go to the Visual Studio Code website and download the installer for Windows. Run the installer and follow the on-screen instructions.
Create a folder on your computer where you'll store the project files. Name the folder spooky-website.
Open VS Code and create two new files:
The first file we’ll be working on is index.html, which contains the structure of the webpage.
Add the following code into the index.html file. This will create the base structure for your website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spooky Website Makeover</title>
<link rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet" />
</head>
<body>
<h1>Welcome to the Haunted Web!</h1>
<div class="container">
<p>This website has been haunted! Proceed if you dare...</p>
<button id="scareBtn">Enter... if you dare!</button>
</div>
</body>
</html>
Explanation: This code sets up the basic structure of the website:
Next, we’ll style the webpage. Open your styles.css file and add the following code:
body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: black; color: white; text-align: center; } h1 { font-size: 4em; font-family: 'Creepster', cursive; text-shadow: 2px 2px 10px #FF4500; } .container { padding: 50px; background-color: rgba(0, 0, 0, 0.8); border: 3px solid #FF4500; max-width: 800px; margin: 50px auto; border-radius: 10px; } button { padding: 10px 30px; font-size: 1.5em; background-color: #FF4500; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #FF6347; }
Explanation: This CSS code styles the webpage:
Now let’s add some JavaScript to make things interactive. Below your HTML code (just before the closing </body> tag), add this JavaScript:
<script> document.getElementById('scareBtn').addEventListener('click', function() { document.body.style.backgroundColor = '#8B0000'; document.getElementById('scareBtn').textContent = "You're cursed now!"; const spookyText = document.createElement('p'); spookyText.textContent = "You've unleashed the spirits! Run while you still can..."; spookyText.style.color = 'white'; spookyText.style.fontSize = '1.5em'; document.querySelector('.container').appendChild(spookyText); document.getElementById('scareBtn').style.display = 'none'; }); </script>
Explanation: This JavaScript makes the button interactive:
Congratulations! You’ve created a spooky website. Try customizing it further by changing the messages or adding more effects.